<template>
        <div class="sure-order-container">
            <div class="vip-card-order">
                <div class="circle-mall">
                    <p>商品<span>每日听书年度VIP</span></p>
                </div>
                <div class="all-price">
                    总计：<span>¥199.00</span>
                </div>
            </div>
            <div class="pay-style-box">
                <div class="title">支付方式</div>
            </div>
            <!-- <pay-style v-if="isAgent" type=0 :iswechat="false" :pay="payStyles" @changePay="changePay" :balance="orderInfo.balance"></pay-style> -->
            <pay-style v-if="!isAgent" :iswechat="false" type=2 :pay="payStyles" @changePay="changePay" :balance="money"></pay-style>            
            <pay-style v-if="!isAgent" :iswechat="true" type=1 :pay="payStyles" @changePay="changePay"></pay-style>
            <ul class="read-box">
                <li><span class="check-icon"></span>您开通VIP服务后，即在接下来的服务周期（365天）内享受VIP特权。</li>
                <li><span class="check-icon"></span>VIP状态到期时，需要您重新购买方可再次开通。</li>
                <li><span class="check-icon"></span>VIP服务自行开通成功后不支持退款，敬请谅解。</li>
            </ul>
            <div class="footer-pay-box" @click="payCard">立即支付</div>
            <address-box v-if="showAddress" @cancelAddress="cancelAddress"></address-box>
            <com-dialog v-if="showDialog" :dialogConent="dialogConent" @leftBtn="cancelBtn" @rightBtn="sureBtn"></com-dialog>
        </div>
    </template>
    <script>
        import {Toast} from 'mint-ui'
        import comDialog from '@/components/comDialog.vue'
        import addressBox from '../addressBox.vue'
        import payStyle from '../payStyle.vue'
        import cookie from '../../../../util/cookie.js'
        import market from '@/api/market.js'
        import pay from '@/api/thirdPay.js'
        export default {
            components: {
                comDialog,
                addressBox,
                payStyle
            },
            data () {
                return {
                    showDialog: false,
                    dialogConent: {
                        title: '您还未设置收货地址<br/>快去设置吧～',
                        left: '取消',
                        right: '设置'
                    },
                    showAddress: false,
                    isRem: true,
                    payStyles: [
                        {
                            isRem: false,
                            isEnough: true
                        },
                        {
                            isRem: false,
                            isEnough: true
                        },
                        {
                            isRem: true,
                            isEnough: true
                        }
                    ],
                    curindex: 2,
                    isRem: true,
                    username: cookie.get('username'),
                    circleCode: cookie.get('circleCode'),
                    allprice: cookie.get('allprice'),
                    isAgent: '',
                    agentId: '',
                    level: '',
                    uid: '',
                    noMoneny: false,
                    isChecked: false,
                    money: 0,
                    nowDialog: 0
                }
            },
            created () {
                this.isAgent = localStorage.getItem('dongHang_data') ? true : false
                // this.isAgent = false
                this.agentId = this.$route.query.agentId
                this.uid = JSON.parse(localStorage.getItem('dongHang_common_user')) ? JSON.parse(localStorage.getItem('dongHang_common_user')).uid : ''
            },
            mounted () {
                if (!this.isAgent) {
                    market.getUserAccount({uid: this.uid}).then(res => {
                        this.money = res.t
                    })
                }
            },
            methods: {
                payCard () {
                    this.isChecked = this.payStyles[0].isRem || this.payStyles[1].isRem || this.payStyles[2].isRem
                    if (!this.isRem) {
                        Toast({
                            message: '请选择阅读《懂行风险提示函》《懂行风险提示函》并同意',
                            position: 'middle',
                            duration: 3000
                        });
                    } else if (!this.isChecked) {
                        Toast({
                            message: '请选择支付方式',
                            position: 'middle',
                            duration: 1000
                        });
                    } else {
                        //0 预付金 1 微信 2 余额
                        if (this.curindex == 2) {
                            market.buyListen({
                                agentId: sessionStorage.myAgentId,
                                id: this.$route.query.pid,
                                uid: this.$route.query.uid || JSON.parse(localStorage.getItem('dongHang_common_user')).uid,
                                price: 199.00,
                                orderType: 9
                            }).then (res => {
                                if (res.code == 0) {
                                    this.dialogConent = {
                                        title: '购买成功！<br/>请打开“懂行”APP进行查看',
                                        left: '取消',
                                        right: '立刻前往'
                                    }
                                    this.nowDialog = 0
                                    this.noMoneny = false
                                    this.showDialog = true                                
                                } else if (res.code == -7) {
                                    this.dialogConent = {
                                        title: '账户余额不足！<br/>请联系懂行客服充值',
                                        left: '取消',
                                        right: '确认'
                                    }
                                    this.showDialog = true
                                    this.noMoneny = true
                                    this.nowDialog = 1
                                    this.payStyles[this.curindex].isEnough = false
                                }
                            })
                        } else if (this.curindex == 1) {
                            // market.payWechat({
                            //     uid: this.$route.query.uid || JSON.parse(localStorage.getItem('dongHang_common_user')).uid,
                            //     payType: 1,
                            //     orderType: 2,
                            //     amount: 199.00 * 100,
                            //     itemId: this.$route.query.pid
                            // }).then(res => {
                            //     if (res.code == 0) {
                            //         window.location.href = res.t
                            //     }
                            // })
                          var url = 'http://dlsapi.rz158.com/thirdPay/getConfig?url=' + location.href.split('#')[0];
                          pay.weiXinPay (url, {
                            uid: this.uid,
                            payType: 1,
                            orderType: 1,
                            agentId: sessionStorage.myAgentId,
                            amount: 199 * 100,
                            itemId: this.$route.query.pid,
                            openId: localStorage.getItem("openid")
                          })

                        }
                        
                    }
                },
                cancelBtn () {
                    setTimeout (() => {
                        this.showDialog = false
                    }, 200)
                },
                sureBtn () {
                    if (this.nowDialog == 0) {
                        setTimeout (() => {
                            window.location.href = 'http://donghang.rz158.com/html/html_rource_bl/html/client/app.html'
                            this.showDialog = false
                            // this.$router.push('/seat')
                            // this.showAddress = true
                        }, 200)
                    } else {
                        setTimeout (() => {
                            this.showDialog = false
                        }, 200)
                    }
                },
                cancelAddress () {
                    this.showAddress = false
                },
                chooseRead () {
                    this.isRem = !this.isRem
                },
                changePay (index) {
                    this.curindex = index
                    for (var i=0; i<this.payStyles.length; i++) {
                        this.payStyles[i].isRem = false
                        this.payStyles[i].isEnough = true
                    }
                    this.payStyles[index].isRem = this.payStyles[index].isRem == false ? true : true
                }
            }
        }
    </script>
    <style lang="less" scoped>
        .vip-card-order {
            /* height: 2.9rem; */
            border-bottom: 0.15rem solid #efefef;
            .card-detail {
                padding: 0.3rem;
                border-bottom: 1px solid #ccc;
                font-size: 0;
                overflow: auto;
                img {
                    width: 1.5rem;
                    float: left;
                }
                .detail-intro {
                    margin: 0.3rem 0 0 1.8rem;
                    p {
                        color: #282828;
                        font-size: 0.3rem;
                        margin-bottom: 0.2rem;
                        .price {
                            float: left;
                            color: #ff2d41;
                            font-size: 0.28rem;
                        }
                        span {
                            float: right;
                            color: #282828;
                            font-size: 0.28rem;
                        }
                    }
                }
            }
            .circle-mall {
                padding: 0.15rem 0.3rem;
                p {
                    line-height: 0.6rem;
                    color: #0a0a0a;
                    font-size: 0.3rem;
                    font-weight: bold;
                    span {
                        float: right;
                    }
                    &:last-child {
                        padding-bottom: 0.15rem;
                        border-bottom: 1px solid #ccc;
                    }
                }
            }
            .all-price {
                padding: 0 0.3rem;
                line-height: 0.8rem;
                color: #282828;
                font-size: 0.3rem;
                font-weight: bold;
                span {
                    float: right;
                    color: #ff2d41;
                }
            }
        }
        .pay-style-box {
            .title {
                color: #282828;
                font-size: 0.3rem;
                height: 0.8rem;
                line-height: 0.8rem;
                padding: 0 0.3rem;
                border-bottom: 1px solid #ccc;
            }    
        }
        .footer-pay-box {
            position: fixed;
            left: 0;
            bottom: 0;
            width: 100%;
            height: 0.8rem;
            line-height: 0.8rem;
            background: #29abae;
            color: #fff;
            font-size: 0.3rem;
            text-align: center;
        }
        .read-box {
            font-size: 0.24rem;
            margin: 0.3rem 0.3rem 0 0.3rem;
            li {
                color: #707070;
            }
            .check-icon {
                float: left;
                width: 0.2rem;
                height: 0.2rem;
                margin-top: .06rem;
                margin-right: 0.1rem;
                border-radius: 50%;
                background-color: #707070;
            }
            .checked {
                background-size: contain;
                border: 1px solid #29abae;
                background-color: #29abae;
                background-image: url(../../../assets/img/check-icon.png)
            }
            span {
                float: left;
            }
            a {
                float: left;
            }
        }
    </style>
